<template> 
	<div>
		<van-image v-if="isShow" width="100%" :src="htmlUrl" />
		<div v-if="!isShow" style="width: 100%;display: flex;justify-content: center;font-size: 15px;margin: 20px 0">
			<van-loading type="spinner" size="24px">战绩生成中，请稍等...</van-loading>
		</div>

		<div class="btnboxs">
			<div class="btn01" @click="edits()">修改</div>
			<div class="btn02" @click="del()"><img src="../../assets/img/icon_del.png" />删除</div>
		</div>
		
		<div v-if="!isShow" style="opacity: 0">
			<!-- <div> -->
			<div ref="imageTofile">
				<div id="captureimg" class="imgbox" ref="canvasbox" :style="'background:'+beijingcolor">
					<img :src="beijing" class="beijing" crossOrigin="Anonymous" />
					<div class="title">{{title}}</div>
					<ul class="datalist">
						<li v-for="(item,index) in list">
							<div
								:class="item.mtype=='1'?'active01':(item.mtype=='2'?'active02':(item.mtype=='3'?'active03':''))">
								<span class="time">{{item.createtime}}</span>
								<p class="liaobt">{{item.title}}</p>
								<span v-if="item.mtype=='1'" class="i1">红</span>
								<span v-else-if="item.mtype=='2'" class="i1">黑</span>
								<span v-else-if="item.mtype=='3'" class="i1">走</span>
							</div>
						</li>
					</ul>
					<div class="line03">
						<!--<van-image-->
						<!--width="120"-->
						<!--height="120"-->
						<!--:src="erweima"-->
						<!--/>-->

						<img :src="erweima" class="qrcode" @touchstart.prevent="qrcodeimgStart()"
							@touchend.prevent="qrcodeimgEnd()" crossOrigin="Anonymous" ref="qrcode" />
						<div class="line03_r">
							<div class="usermsg">
								<img :src="headpic" crossOrigin="Anonymous">
								<span>{{nickname}}</span>
							</div>
							<div class="tipstxt">
								<p>识别左侧二维码</p>
								<p>我的主页有更多推荐哦～</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


	</div>
</template>

<script>
	import QrCode from 'qrcode-decoder';
	import html2canvas from "html2canvas";

	var timer;
	export default {
		name: "",
		data() {
			return {
				id: "",
				beijing: "",
				beijingcolor: "",
				erweima: "",
				headpic: "",
				nickname: "",
				title: "",
				htmlUrl: "",
				list: [],
				Loop: null,
				timedTasksCollector: null,
				isShow: false
			}
		},
		mounted() {
			this.id = this.$route.params.id;
			this.getMsg()
		},
		watch: {
			list() {
				if (this.list.length !== 0) {
					this.$nextTick(() => {
						setTimeout(() => {
							this.toImage();
						}, 50)
					})
				}
			}
		},
		methods: {
			toImage() {
				// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
				var targetDom = document.getElementById("captureimg");
				console.log(targetDom.offsetWidth);
				html2canvas(this.$refs.imageTofile, {
					backgroundColor: null,
					width: targetDom.offsetWidth, //注意 下面解决当页面滚动之后生成图片出现白边问题
					useCORS: true, // 允许图片跨域
					taintTest: true, // 在渲染前测试图片
					x: (window.innerWidth - targetDom.offsetWidth) / 2, //此处修复html2canvas生成图片出现白边的问题
				}).then((canvas) => {
					let url = canvas.toDataURL("image/png");
					this.htmlUrl = url; // 把生成的base64位图片上传到服务器,生成在线图片地址
					if (this.htmlUrl) {
						// 渲染完成之后让图片显示，用v-show可以避免一些bug
						this.isShow = true;
					}
					// this.sendUrl();
				});
			},
			//  长按识别二维码 开始
			qrcodeimgStart: function() {
				var that = this;
				clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					that.$dialog.confirm({
							message: '识别图中二维码',
						}).then(() => {
							// on confirm
							var qr = new QrCode();

							let img = this.$refs['qrcode']
							console.log(img);
							qr.decodeFromImage(img, {
								crossOrigin: "anonymous"
							}).then((res) => {
								console.log(res.data);
								var ress = res.data;
								var url = that.Url + 'api' + ress.match(/api(\S*)/)[1];
								location.href = url;
							});
						})
						.catch(() => {
							// on cancel
						});

				}.bind(this), 1000);
			},
			//  长按识别二维码 结束
			qrcodeimgEnd() {
				clearTimeout(this.Loop);
			},
			//删除
			del() {
				var that = this;
				that.$dialog.confirm({
					title: '提示',
					message: '删除后不能恢复，确认要删除吗？',
					confirmButtonText: "删除"
				}).then(() => {
					that.request1.post1({
						url: that.Url + "api/user.zhanji/zhanjiDel",
						params: {
							zhanjiid: that.id
						},
						success: function(res) {
							// console.log(res);
							if (res.data.code == 1) {
								that.$toast.success("删除成功");
								timer = setTimeout(function() {
									that.$router.go(-1)
								}, 2000)
							} else {
								alert(res.data.msg)
							}
						},
						fail: function(error) {
							alert(error.data.msg)
						}
					})
				}).catch(() => {
					// on cancel
				});

			},
			//编辑
			edits() {
				this.$router.push({
					path: "/myzoe/creatzhanji",
					query: {
						id: this.id,
						pagetitle: "编辑战绩表"
					}
				})
			},
			getMsg() {
				var that = this;

				that.request1.post1({
					url: that.Url + "api/user.zhanji/zhanjiShow",
					params: {
						zhanjiid: that.id
					},
					success: function(res) {

						if (res.data.code == 1) {
							that.beijing = that.Url + res.data.data.beijing;
							that.erweima = that.Url + res.data.data.erweima;
							that.headpic = that.Url + res.data.data.headpic;
							that.beijingcolor = res.data.data.beijingcolor;
							that.nickname = res.data.data.nickname;
							that.title = res.data.data.zhanji.title;
							that.list = res.data.data.zhanji.content;

						} else {
							alert(res.data.msg)
						}
					},
					fail: function(error) {
						alert(error.data.msg)
					}
				})
			},
			//            initCanvas() {
			//                console.log("初始化canvas")
			//                canvas = document.getElementById('canvas');
			//                ctx = canvas.getContext('2d');
			//                canvas.width = this.$refs.canvasbox.offsetWidth;
			//                canvas.height = this.$refs.canvasbox.offsetHeight;
			//                this.drawSmile()
			//            },
			//            drawSmile() {
			//                var that=this;
			//                ctx.beginPath();
			//                ctx.fillStyle=that.beijingcolor;
			//                ctx.fillRect(0, 0, canvas.width, canvas.height);
			//                ctx.drawImage(that.Url+that.beijing, 0, 0, 325,78);
			//                ctx.stroke();
			//            }
		}
	}
</script>

<style scoped>
	/*.imgbox{*/
	/*width: 325px;*/
	/*margin: auto;*/
	/*min-height: 200px;*/
	/*}*/
	.imgbox {
		width: 100vw;
		margin: 10px 0;
		min-width: 200px;
		padding-bottom: 10px;
	}

	.imgbox .beijing {
		width: 100%;
	}

	.title {
		text-align: center;
		font-size: 18px;
		color: yellow;
	}

	.datalist {
		width: 90%;
		margin: 20px auto;
	}

	.datalist li {
		background: #fff;
		margin-bottom: 2px;
		padding: 0 8px;
		box-sizing: border-box;
		font-size: 14px;
		font-weight: bold;
	}

	.datalist li>div {
		height: 32px;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.datalist li .active01 {
		color: red;
	}

	.datalist li .active02 {
		color: gray;
	}

	.datalist li .active03 {
		color: #4482e4;
	}

	.datalist .time {
		width: 48px;
		text-align: center;
	}

	.datalist .i1 {
		width: 28px;
		font-size: 16px;
		text-align: center;
	}

	.datalist .liaobt {
		width: calc(100% - 120px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.line03 {
		width: 90%;
		margin: 34px auto 5px;
		display: flex;
		flex-flow: row;
		align-items: center;
		justify-content: space-between;
	}

	.line03 .qrcode {
		width: 120px;
		height: 120px;
	}

	.line03 .line03_r {
		height: 120px;
		width: calc(100% - 140px);
		display: flex;
		flex-flow: column;
		justify-content: space-around;
	}

	.line03 .usermsg {
		display: flex;
		flex-flow: row;
	}

	.line03 .usermsg img {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 2px solid #fff;
	}

	.line03 .usermsg span {
		line-height: 36px;
		margin-left: 8px;
		font-size: 18px;
		color: #fff;
	}

	.line03 .tipstxt p:first-child {
		color: #fff;
		font-size: 20px;
	}

	.line03 .tipstxt p:last-child {
		color: yellow;
		font-size: 14px;
	}

	.btnboxs {
		width: calc(100% - 24px);
		margin: 30px auto 0;
		display: flex;
		flex-flow: row;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;
	}

	.btnboxs .btn01 {
		width: 68%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		background: #fc5d4d;
		box-shadow: 0 5px 10px #f6a59f;
		border-radius: 4px;
	}

	.btnboxs .btn02 {
		width: 28%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background: #fff;
		border-radius: 5px;
		color: #666;
	}

	.btnboxs .btn02 img {
		width: 18px;
		margin-right: 10px;
	}
</style>
